import React from 'react';
import {withRouter} from 'react-router-dom'
import { Card, Form, Input, Button, message, Icon } from "antd";
import {setToken} from '../utils/localstorg'
import {LoginModel} from '../api/login'

import {connect} from 'react-redux'
import {setName} from '../redux/user.redux'

import '../style/login.less'
import TextArea from "antd/es/input/TextArea";
const FormItem = Form.Item;

const loginModel=new LoginModel()

@connect(
  state=>state.user,
  {setName}
)
class FormRegister extends React.Component{
  constructor(props) {
    super(props);

  }
  handleSubmit(){
    let userInfo = this.props.form.getFieldsValue();
    console.log(userInfo);

    this.props.form.validateFields((err,values)=>{
      if(!err){
        loginModel.register(userInfo.userName
          ,userInfo.realName
          ,userInfo.userPwd
          ,userInfo.desc
        )
          .then(result=>{
            if(result.code===0){

              this.props.setName(result.data.user)
              setToken(result.data.token)
              this.props.history.push('/')

            }else{
              message.error(result.msg)
            }
          }).catch(err=>{
          message.error(err)
        })

      }
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className='login-div'>
        <Card title="茶品研究" style={{marginTop:10}}>
          <Form style={{width:300}}>
            <FormItem>
              {
                getFieldDecorator('userName',{
                  initialValue:'',
                  rules:[
                    {
                      required:true,
                      message:'用户名不能为空'
                    },
                    {
                      min:5,max:10,
                      message:'长度不在范围内'
                    },
                    {
                      pattern:new RegExp('^\\w+$','g'),
                      message:'用户名必须为字母或者数字'
                    }
                  ]
                })(
                  <Input prefix={<Icon type="user"/>} placeholder="请输入用户名" />
                )
              }
            </FormItem>
            <FormItem>
              {
                getFieldDecorator('userPwd', {
                  initialValue: '',
                  rules: []
                })(
                  <Input prefix={<Icon type="lock" />} type="password" placeholder="请输入密码" />
                )
              }
            </FormItem>
            <FormItem>
              {
                getFieldDecorator('realName',{
                  initialValue:'',
                })(
                  <Input prefix={<Icon type="user"/>} placeholder="请输入您的姓名" />
                )
              }
            </FormItem>
            <FormItem>
              {
                getFieldDecorator('desc',{
                  initialValue:'',
                })(
                  <TextArea placeholder="请输入描述信">

                  </TextArea>
                )
              }
            </FormItem>
            <FormItem>
              <Button type="primary" onClick={()=>this.handleSubmit()}>注册</Button>

            </FormItem>
          </Form>
        </Card>
      </div>
    );
  }
}


const Register=Form.create()(FormRegister);
export default withRouter(Register);
